<template>
  <a-collapse v-model="activeKey">
    <a-collapse-panel key="1" header="通信管控信息维护">
      <a-form-model layout="inline" ref="ruleForm" :model="form1" :rules="rules">
        <a-form-model-item ref="name" label="IP地址" prop="ip">
          <IpAddress v-model="form1.ipAddress" @change="changeIp" />
          <!-- <a-input v-model="form1.ipAddress" @change="changeIp" /> -->
        </a-form-model-item>
        <a-form-model-item ref="name" label>
          <a-button type="primary" @click="saveInfo(1)">保存</a-button>
        </a-form-model-item>
        <!-- <a-form-model-item>
          <a-button type="primary" @click="onSubmit"> 确定 </a-button>
          <a-button style="margin-left: 10px" @click="resetForm"> 重置 </a-button>
        </a-form-model-item>-->
      </a-form-model>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="载荷处理单元信息维护">
      <a-form-model layout="inline" ref="ruleForm" :model="form2" :rules="rules">
        <a-form-model-item ref="name" label="IP地址" prop="ip">
          <IpAddress v-model="form2.ipAddress" @change="changeIp" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="TCP发送端口 " prop="sendPort">
          <a-input v-model="form2.sendPort" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="TCP接收端口 " prop="receivePort">
          <a-input v-model="form2.receivePort" />
        </a-form-model-item>
        <a-form-model-item ref="name" label>
          <a-button type="primary" @click="saveInfo(2)">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="遥测数据处理单元信息维护">
      <a-form-model layout="inline" ref="ruleForm" :model="form3" :rules="rules">
        <a-form-model-item ref="name" label="IP地址" prop="ip">
          <IpAddress v-model="form3.ipAddress" @change="changeIp" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="TCP发送端口 " prop="sendPort1">
          <a-input v-model="form3.sendPort" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="TCP接收端口 " prop="receivePort1">
          <a-input v-model="form3.receivePort" />
        </a-form-model-item>
        <a-form-model-item ref="name" label>
          <a-button type="primary" @click="saveInfo(3)">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-collapse-panel>
    <a-collapse-panel key="4" header="业务及综合管控单元信息维护">
      <a-form-model layout="inline" ref="ruleForm" :model="form4" :rules="rules">
        <a-form-model-item ref="name" label="IP地址" prop="ip">
          <IpAddress v-model="form4.ipAddress" @change="changeIp" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="TCP发送端口 " prop="sendPort2">
          <a-input v-model="form4.sendPort" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="TCP接收端口 " prop="receivePort2">
          <a-input v-model="form4.receivePort" />
        </a-form-model-item>
        <a-form-model-item ref="name" label>
          <a-button type="primary" @click="saveInfo(4)">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import IpAddress from '@/components/ipAddress'
export default {
  components: { IpAddress },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      activeKey: ['1', '2', '3', '4'],
      other: '',
      // form: {
      //   name: '',
      //   ipAddress: '',
      //   ipAddress4: '',
      //   sendPort: '',
      //   receivePort: '',
      //   ipAddress1: '',
      //   sendPort1: '',
      //   receivePort1: '',
      //   ipAddress2: '',
      //   sendPort2: '',
      //   receivePort2: '',
      // },
      form1: {},
      form2: {},
      form3: {},
      form4: {},

      rules: {
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        sendPort: [{ required: true, message: '请输入发送端口号', trigger: 'blur' }],
        receivePort: [{ required: true, message: '请输入接收端口号', trigger: 'blur' }],
        sendPort1: [{ required: true, message: '请输入发送端口号1', trigger: 'blur' }],
        receivePort1: [{ required: true, message: '请输入接收端口号1', trigger: 'blur' }],
        sendPort2: [{ required: true, message: '请输入发送端口号2', trigger: 'blur' }],
        receivePort2: [{ required: true, message: '请输入接收端口号2', trigger: 'blur' }],
      },
    }
  },
  methods: {
    saveInfo(val) {
      let a = `form${val}`
      console.log(this[a], a)
    },
    changeIp(val) {
      console.log(val)
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

<style></style>
